<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --main-color:pink
        }
        li{
            color: var(--main-color);
        }
    </style>
</head>

<body>
    <!-- <div class="father">
        <div class="son"></div>
    </div> -->
    <marquee >我是跑马灯</marquee>
    <ul>
        <li
            style="cursor:url('https://misc.360buyimg.com/lib/img/e/logo-201305-b.png'),auto; list-style-type: upper-roman;">
            <span>123</span></li>
    </ul>
    <div style="resize: both;background-color: red;overflow: auto;">缩放</div>
<input type="radio" style="accent-color: red;"></input>
    <div style="height: 500px;background-color: green;display: flex;
    align-items:end;justify-content: center;">
        <span style="font-size: 60px;;vertical-align: middle;text-indent: 2rem;-webkit-text-stroke:1px blue">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, assumenda. Aliquid, consectetur laboriosam
            natus
            
        </span>
    </div>

    <dl>
        <dt>做好笔记</dt>
        <dd>笔记是我们以后复习的一个抓手</dd>
        <dd>笔记可以是电子版，也可以是纸质版</dd>
        <dt>多加练习</dt>
        <dd>只有敲出来的代码，才是自己的</dd>
        <dt>别怕出错</dt>
        <dd>错很正常，改正后并记住，就是经验</dd>
    </dl>
    <meter value=".328"></meter>
    <progress value="0.8"></progress>
    <input type="text" list="mydata">
    <datalist id="mydata">
        <option value="周冬雨">周冬雨</option>
        <option value="周杰伦">周杰伦</option>
        <option value="温兆伦">温兆伦</option>
        <option value="马冬梅">马冬梅</option>
    </datalist>

    <details>
        <summary>如何走上人生巅峰？</summary>
        <p>一步一步<mark>走</mark>呗</p>
    </details>

    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī mèi wǎng liǎng </rt>
    </ruby>
</body>

</html>